<template>
  <el-drawer
    class="user-drawer"
    v-model="drawerVisible"
    title="基本信息"
    append-to-body
    @close="cancel"
  >
    <el-scrollbar>
      <el-descriptions :column="2" border>
        <el-descriptions-item
          label="姓名"
          label-align="right"
          min-width="90px"
        >{{ row.staff_name }}</el-descriptions-item>
        <el-descriptions-item
          label="部门"
          label-align="right"
          min-width="90px"
        >{{ row.department_name }}</el-descriptions-item>
        <el-descriptions-item
          label="性别"
          label-align="right"
          min-width="90px"
        >{{ row.staff_sex === 1 ? '男': '女' }}</el-descriptions-item>
        <el-descriptions-item
          label="年龄"
          label-align="right"
          min-width="90px"
        >{{ row.staff_age }}</el-descriptions-item>
        <el-descriptions-item
          label="职称"
          label-align="right"
          min-width="90px"
        >{{ row.staff_title }}</el-descriptions-item>
        <el-descriptions-item
          label="入职年份"
          label-align="right"
          min-width="90px"
        >{{ row.entry_date }}</el-descriptions-item>
        <el-descriptions-item
          label="学历"
          label-align="right"
          min-width="90px"
        >{{ row.education_name }}</el-descriptions-item>
        <el-descriptions-item
          label="手机号"
          label-align="right"
          min-width="90px"
        >{{ row.phone }}</el-descriptions-item>
      </el-descriptions>
    </el-scrollbar>
  </el-drawer>
</template>

<script setup>
const props = defineProps({
  row: {
    type: Object,
    default: () => null
  },
  modelValue: {
    type: Boolean,
    default: false
  }
})

const drawerVisible = ref(props.modelValue)

const emit = defineEmits(['update:modelValue', 'cancel'])

// 取消
const cancel = () => {
  drawerVisible.value = false
  emit('update:modelValue', false)
  emit('cancel')
}

watch(
  props,
  (val) => {
    drawerVisible.value = val.modelValue
  }, {
    deep: true
  }
)
</script>

<style lang="scss">
  .user-drawer {
    @media (max-width: 991px) {
      width: 90% !important;
    }
  }
</style>
